<template>
	<view class="page">
		<!-- 首页展示 -->
		<view class="page_content">
			<!-- banner -->
			<view class="swiper" v-if="imgUrls.length">
				<swiper indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255,0.6)"
					indicator-active-color="#fff">
					<block v-for="(item, index) in imgUrls" :key="index">
						<swiper-item>
							<navigator :url="item.url" class="slide-navigator acea-row row-between-wrapper"
								hover-class="none">
								<image :src="item.pic" class="slide-image" lazy-load></image>
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="index-product-wrapper">
				<view class="list-box animated" :class="productList.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in productList" :key="index" @click="goDetail(item)">
						<view class="pictrue">
							<span class="pictrue_log pictrue_log_class"
								v-if="item.activityH5 && item.activityH5.type === '1'">秒杀</span>
							<span class="pictrue_log pictrue_log_class"
								v-if="item.activityH5 && item.activityH5.type === '2'">砍价</span>
							<span class="pictrue_log pictrue_log_class"
								v-if="item.activityH5 && item.activityH5.type === '3'">拼团</span>
							<image :src="item.image" mode=""></image>
						</view>
						<view class="text-info">
							<view class="title line1">{{ item.storeName }}</view>
							<view class="old-price">
								<text>¥</text>
								{{ item.otPrice }}
							</view>
							<view class="price">
								<text>￥</text>
								{{ item.price }}
								<view class="txt" v-if="item.checkCoupon">券</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loadingicon acea-row row-center-wrapper"><text class="loading iconfont icon-jiazai"
						:hidden="loading == false"></text></view>
				<view class="mores-txt flex"><text>我是有底线的</text></view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
			:isGoIndex="false"></authorize>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import authorize from '@/components/Authorize';

	import {
		getProductslist
	} from '@/api/store.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		silenceBindingSpread
	} from '@/utils';

	const app = getApp();

	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			authorize
		},
		data() {
			return {
				imgUrls: [{
					name: 'invite',
					pic: 'http://image.tocj1314.com/e642784461d74da6aad2cf8a117d6687.png',
					id: 78,
					url: '/pages/activity/invite/index'
				}],
				loading: false,
				productList: [],
				params: {
					page: 1,
					limit: 10
				},
				configApi: {}, //分享类容配置
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		onLoad(options) {
			//记录推广人
			if (options.spid) {
				app.globalData.spid = options.spid;
			}
			this.isLogin && silenceBindingSpread();
			this.getProductList();
			this.getCityList();
		},
		onPullDownRefresh() {
			this.getProductList();
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			// 授权回调
			onLoadFun() {},
			// 商品列表
			getProductList(onloadH) {
				this.loading = true;
				getProductslist(this.params).then(({
					data
				}) => {
					this.loading = false;
					this.productList = data.list;
					uni.stopPullDownRefresh();
				});
			},
			// 商品详情
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/product_details/index?id=${item.id}`
				});
			},
			// 回去地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					uni.setStorage({
						key: 'city_for_address',
						data: res.data,
						success: function() {
							console.log('get city_for_address success');
						}
					});
				});
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '发现一家好店铺，分享给你～',
				path: '/pages/index/index?spid=' + this.$store.getters.uid || '',
				imageUrl: "http://image.tocj1314.com/0746056800564c178edcc3c9bfdf0be2.png"
			};
		}
	};
</script>
<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);

		.page_content {
			background-color: #f5f5f5;
			margin-top: 10rpx;
			padding: 0 20rpx;

			.swiper {
				position: relative;
				width: 710rpx;
				height: 280rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				overflow: hidden;
				z-index: 10;

				swiper,
				.swiper-item,
				image {
					width: 100%;
					height: 280rpx;
					border-radius: 10rpx;
				}
			}

			.index-product-wrapper {
				margin-top: 40rpx;
				margin-bottom: 110rpx;

				.list-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 30rpx;

					.item {
						width: 345rpx;
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 10px;
						overflow: hidden;

						image {
							width: 100%;
							height: 345rpx;
						}

						.text-info {
							padding: 10rpx 20rpx 15rpx;

							.title {
								color: #222222;
							}

							.old-price {
								margin-top: 8rpx;
								font-size: 26rpx;
								color: #aaaaaa;
								text-decoration: line-through;

								text {
									margin-right: 2px;
									font-size: 20rpx;
								}
							}

							.price {
								display: flex;
								align-items: flex-end;
								color: $theme-color;
								font-size: 34rpx;
								font-weight: 800;

								text {
									padding-bottom: 4rpx;
									font-size: 24rpx;
									font-weight: normal;
								}

								.txt {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 28rpx;
									height: 28rpx;
									margin-left: 15rpx;
									margin-bottom: 10rpx;
									border: 1px solid $theme-color;
									border-radius: 4rpx;
									font-size: 22rpx;
									font-weight: normal;
								}
							}
						}
					}
				}
			}
		}
	}

	.pictrue {
		position: relative;
	}

	.fixed {
		z-index: 100;
		position: fixed;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, red 50%, #ff5400 100%);
	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	.menu-txt {
		font-size: 24rpx;
		color: #454545;
	}

	.mp-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 330rpx;
		background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);
		// border-radius: 0 0 30rpx 30rpx;
	}
</style>
